import { Button, Card, CardContent, createStyles, Grid, Theme, Typography } from "@material-ui/core"
import { makeStyles } from "@material-ui/core/styles"
import SendIcon from "@material-ui/icons/Send"
import * as  React from "react"

const useStyles = makeStyles((theme: Theme) => createStyles({
  root: {
    marginBottom: "2rem",
    userSelect: "none",
    cursor: "pointer",
    transition: "transform 0.4s ease 0s",
    "&:hover": {
      boxShadow: theme.shadows[3],
      transform: "scale(1.1)",
    },
  },
  title: {
    fontWeight: 700,
  },
  icon: {
    width: "32px",
  },
  button: {
    padding: "6px 0",
    "&:hover": {
      background: "none",
    },
  },
}))

interface HeroTileProps {
  icon: React.ReactNode
  title: string
  description: string
  tertiary: string
}

export default function HeroTile(props: HeroTileProps) {
  const { icon, title, description, tertiary } = props
  const classes = useStyles()
  return (
    <Card className={classes.root}>
      <CardContent>
        <Grid container spacing={2}>
          <Grid item>
            {icon}
          </Grid>
          <Grid item>
            <Typography variant="h5" component="h2" gutterBottom className={classes.title}>{title}</Typography>
            <Typography gutterBottom>{description}</Typography>
            <Button color="primary" endIcon={<SendIcon/>} className={classes.button} disableRipple>{tertiary}</Button>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  )
}
